<template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNo"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="search.userName" placeholder="请输入日志名称"></el-input>
                </el-col>

                <el-col :span="12"
                ><div>
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                    <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                </div>
                </el-col></el-form
            >

            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="#" sortable> </el-table-column>
                <el-table-column prop="userName" label="登录名称"> </el-table-column>
                <el-table-column prop="ipaddr" label="登录IP地址" width="160px"> </el-table-column>
                <el-table-column prop="loginLocation" label="登录地点" width="160px"> </el-table-column>
                <el-table-column prop="browser" label="浏览器类型" width="160px"> </el-table-column>
                <el-table-column prop="os" label="操作系统"> </el-table-column>
                <el-table-column prop="status" label="登录状态"> </el-table-column>
                <el-table-column prop="msg" label="提示消息"> </el-table-column>
                <el-table-column prop="loginTime" label="访问时间" width="160px"> </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">

                        <el-button size="small" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="danger"
                        >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNo"
                    :page-sizes="[1, 5, 10, 20, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
            >
            </el-pagination>

        </el-row>
    </div>
</template>

<script>
    import Vue from 'vue';
    import axios from 'axios';
    import VueAxios from 'vue-axios';
    Vue.use(VueAxios, axios);

    export default {
        data() {
            return {
                tableData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                page: {},
                form: { status: '0' },
                search: { pageNo: 1, pageSize: 5 },
                formLabelWidth: '80px',
                dialogTableVisible: false
            };
        },
        created: function () {
            this.load();
        },
        methods: {
            //初始化数据
            load() {
                var _this = this;
                //页面初始化时，加载的方法
                this.$http
                    .get('/system/api/log/query', {
                        params: {
                            pageNo: this.search.pageNo,
                            pageSize: this.search.pageSize,
                            title: this.search.title
                        }
                    })
                    .then((response) => {
                        console.log(response.data);
                        _this.tableData = response.data.data.records;
                        _this.page = response.data.data;
                        _this.total = response.data.data.total;
                    });
            },
            //每页显示数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.search.pageSize = val;
                this.load();
            },
            //第几页发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.search.pageNo = val;
                this.load();
            },
            //查询
            searchBtn() {
                console.log(`当前页`);
                this.load();
            },
            emptyBtn() {
                this.search = {};
                this.search.pageNo = 1;
                this.search.pageSize = 5;
                this.load();
            },
            deleteInfo: function (index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        var _this = this;
                        axios
                            .delete('/system/api/log/delete?operId=' + row.operId)
                            .then(function (response) {
                                console.log(response);
                                if (response.status == 200) {
                                    //重新加载数据
                                    _this.load();
                                    //提示成功
                                    _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                                _this.$message.error('你错了。。。');
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            }
        }
    };
</script>
<style>
</style>